<template>
  <view class="wrapper">
    <image class="bg" src="../../static/profile/bg.png" mode="widthFix"></image>
    <!-- 头部 -->
    <view class="header">
      <image class="img" :src="avatar" mode="aspectFit"></image>
      <view class="name">
        <view class="nickname">{{nickName}}</view>
        <view class="dept">{{dept}}</view>
      </view>
    </view>
    <view class="desc">
      <uni-icons type="personadd-filled" color="#fff"></uni-icons>
      {{personalSignature}}
    </view>
    <!-- 内容列表 -->
    <view class="list">
      <view class="item" v-for="(item,index) in listMap.top">
        <image class="icon" :src="item.icon" mode="aspectFit" />
        {{item.text}}: {{item.value}}
      </view>
    </view>
    
    <view class="list">
      <view class="item" v-for="(item,index) in listMap.bottom" @click="onClickItem(item)">
        <image class="icon" :src="item.icon" mode="aspectFit" />
        {{item.text}}

        <uni-icons type="right" color="#eee" class="ml-auto" size='20'></uni-icons>
      </view>
    </view>
    <view class="btn">
      <button @click="onClick" class="logout" type="primary">退出登录</button>
    </view>
  </view>
</template>

<script>
  import {
    LOCAL_PASSWORD,
    LOCAL_PHONE
  } from '../../constants/constants'
  import {
    getUserInfo,
    removeUserInfo
  } from '../../utils'
  import {
    getDeptList,
    getInfo
  } from '../../utils/api'
  export default {
    computed: {
      avatar() {
        return this.userInfo.headImg || '../../static/profile/avatar.webp'
      },
      nickName() {
        return this.userInfo.nickName
      },
      personalSignature() {
        return this.userInfo.personalSignature || '无'
      },
      dept() {
        const map = this.deptList.reduce((prev, next) => {
          return {
            ...prev,
            [next.deptId]: next
          }
        }, {})
        return map[this.userInfo.deptId]?.deptName
      },
      listMap() {
        return {
          top: [{
              text: '电话',
              icon: '../../static/profile/phone.png',
              value: this.userInfo.phone || '无'
            },
            {
              text: '邮箱',
              icon: '../../static/profile/email.png',
              value: this.userInfo.email || '无'
            },
            {
              text: '事假余额',
              icon: '../../static/profile/thing.png',
              value: this.userInfo.affairsLeave
            },
            {
              text: '年假余额',
              icon: '../../static/profile/year.png',
              value: this.userInfo.annualLeave 
            },
            {
              text: '病假余额',
              icon: '../../static/profile/sick.png',
              value: this.userInfo.sickLeave 
            },
            {
              text: '婚假余额',
              icon: '../../static/profile/memary.png',
              value: this.userInfo.marriageLeave 
            },
            {
              text: '产假余额',
              icon: '../../static/profile/born.png',
              value: this.userInfo.maternityLeave 
            },
            {
              text: '陪产假余额',
              icon: '../../static/profile/with.png',
              value: this.userInfo.paternityLeave 
            },
            {
              text: '夏休假',
              icon: '../../static/profile/with.png',
              value: this.userInfo.summerLeave 
            },
          ],
          bottom: [ {
            text: '修改信息',
            icon: '../../static/profile/setting.png',
            path: '/pages/changeProfile/changeProfile'
          },]
        }
      }
    },
    data() {
      return {
        userInfo: {},
        deptList: []
      }
    },
    async onLoad() {
      this.userInfo = await getInfo()
      this.getDept()
    },
    methods: {
      onClickItem(item) {
        uni.navigateTo({
          url: item.path
        })
      },
      getDept() {
        getDeptList().then(res => {
          this.deptList = res
        })
      },

      onClick() {
        removeUserInfo()
        uni.removeStorageSync(LOCAL_PASSWORD)
        uni.removeStorageSync(LOCAL_PHONE)
        uni.redirectTo({
          url: '/pages/login/login'
        })
      }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #eee;
  }
  .bg {
    position: fixed;
    top: 0;
    width: 100%;
    left: 0;
    z-index: 0;
  }

  .header {
    position: relative;
    padding: 144rpx 24rpx 0rpx;
    display: flex;
    align-items: center;
    gap: 16rpx;
    width: 100%;
    flex-wrap: nowrap;

    .img {
      width: 208rpx;
      height: 208rpx;
      border-radius: 50%;
    }

    .name {
      display: flex;
      flex-direction: column;
      gap: 8rpx;
    }
  }

  .nickname {
    font-size: 36rpx;
    color: #fff;
  }

  .dept {
    color: #eee;
    font-size: 24rpx;
  }

  .desc {
    position: relative;
    color: #fff;
    padding: 12rpx 24rpx;
    display: flex;
    align-items: center;
    gap: 12rpx;
    font-size: 24rpx;
    z-index: 10;
  }

  .list {
    position: relative;
    padding: 24rpx;
    background-color: #fff;
    border-radius: 16rpx;
    margin: 24rpx 24rpx 0;
    
    .item {
      display: flex;
      align-items: center;
      gap: 12rpx;
      border-bottom: 1rpx solid #eee;
      padding-bottom: 24rpx;
      .icon {
        width: 36rpx;
        height: 36rpx;
      }
      & +.item {
        margin-top: 24rpx;
      }
      &:last-child {
        border-bottom: none;
        padding-bottom: 0;
      }
    }
    & + .list {
      margin-top: 50rpx;
    }
  }
  
  .btn {
    margin: 70rpx 24rpx 56rpx;
  }
</style>